<template>
  <el-card class="glass-card" shadow="hover">
    <template #header>
      <div class="card-header">
        <span>硬压板</span>
        <el-tag size="small" effect="plain">{{ items.length }} 项</el-tag>
      </div>
    </template>
    <div class="jumpers-grid">
      <div class="jumper" v-for="it in items" :key="it.ID">
        <div class="name" :title="it.Name">{{ it.Name }}</div>
        <el-switch v-model="proxy[it.ID]" disabled :active-text="it.Status ? '投入' : '退出'" />
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import type { HjumperItem } from "@/api/hmi/home.api";

defineOptions({ name: "HjumperCard" });
const props = defineProps<{ items: HjumperItem[] }>();

// 用于配合 el-switch 的只读展示（不改变原始 props）
const proxy = computed<Record<number, boolean>>(() => {
  const map: Record<number, boolean> = {};
  props.items.forEach((it) => (map[it.ID] = !!it.Status));
  return map;
});
</script>

<style scoped lang="scss">
.glass-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}
.jumpers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.jumper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  .name {
    color: #111827;
    font-size: 13px;
    margin-right: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>

